<template>
  <div>
    <div class="wrap">
      <div class="tou">
        注册
      </div>
      <div class="wenzi">
        <p class="p1">我们将发送验证码到您填写的手机号上，请注意查收</p>
      </div>
      <div class="yanzheng">
        <img class="img1" src="../../assets/个人中心/1个人中心/shouji.png"/>
        <input type="text" placeholder="请输入手机号" />
        <img class="img2" src="../../assets/个人中心/1个人中心/qingchu.png"/>
      </div>
      <div class="yanzheng2">
        <div class="inp1">
          <img class="img3" src="../../assets/个人中心/1个人中心/yanzm.png"/>
          <input type="text" placeholder="请输入手机验证码" />
        </div>
        <div class="inp2">
          <p class="p2">获取验证码</p>
        </div>
      </div>
      <div class="yanzheng3">
        <img class="img4" src="../../assets/个人中心/1个人中心/yaoqingma.png"/>
        <input type="text" placeholder="请输入邀请码"/>
      </div>
      <div class="yanzheng4">
        <div class="left">
          <p>
            <router-link to="/denglu">取消</router-link>
          </p>
        </div>
        <div class="right">
          <router-link to="/person" class="wancheng">完成注册</router-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
</script>

<style>
  .wancheng{
    color: #F2F2F2;
  }
  .wrap{
    width: 100%;
  }
  .tou{
    width: 100%;
    height: 2.666rem;
    background: #E53E42;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1rem;
    line-height: 1;
    letter-spacing: 0;
    color: #ffffff;
  }
  .wenzi{
    width: 100%;
    height: 1rem;
    margin-top: 2.9rem;
  }
  .wenzi .p1{
    text-align: center;
    font-size: 0.5rem;
    line-height: 1rem;
    letter-spacing: 0;
    color: #808080;
  }
  .yanzheng{
    width: 95%;
    height: 1.666rem;
    border-radius: 0.833rem;
    border: 1px solid #CCCCCC;
    margin:  0.555rem auto;
    background: white;
    display: flex;
    align-items: center;
    position: relative;
  }
  .yanzheng .img1,.yanzheng2 .inp1 .img3,.yanzheng3 .img4{
    padding-left: 1rem;
    padding-right: 0.555rem;
    border-right: 1px solid #CCCCCC;
    width: 0.611rem;
    height: 0.833rem;
  }
  .yanzheng .img2{
    width: 0.666rem;
    height: 0.666rem;
    position: absolute;
    right: 0.555rem;
  }
  .yanzheng input,.yanzheng2 .inp1 input,.yanzheng3 input{
    height: 100%;
    line-height: 0.833rem;
    font-size: 0.666rem;
    padding-left: 0.555rem;
  }
  .yanzheng2 .inp1 input{
    width: 5.3rem;
  }
  .yanzheng2{
    width: 95%;
    height: 1.666rem;
    margin: 0 auto;
  }
  .yanzheng2 .inp1{
    width: 9rem;
    height: 100%;
    background: white;
    border-radius: 0.833rem;
    float: left;
    display: flex;
    align-items: center;
  }
  .yanzheng2 .inp2{
    float: right;
    width: 5.555rem;
    height: 1.666rem;
    background: white;
    border-radius: 0.833rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .inp2 .p2{
    font-size: 0.666rem;
    line-height: 1.666rem;
    letter-spacing: 0;
    color: #808080;
  }
  .yanzheng3{
    width: 95%;
    height: 1.666rem;
    border-radius: 0.833rem;
    background: white;
    margin: 0.555rem auto;
    display: flex;
    align-items: center;
  }
  .yanzheng4{
    width: 95%;
    height: 1.666rem;
    margin: 0 auto;
  }
  .yanzheng4 .left,.yanzheng4 .right{
    width: 6.666rem;
    height: 1.666rem;
    float: left;
    border: 1px solid #CCCCCC;
    background: white;
    border-radius: 0.833rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .yanzheng4 .right{
    float: right;
    background: #E53E42;
  }
  .left p,.right p{
    font-size: 0.777rem;
    letter-spacing: 0;
    color: #4d4d4d;
  }
  .right p{
    color: white;
  }
</style>
